<template>
  <!-- 
    搜索后的页面
   -->
  <div class="popup">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      shape="round"
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 历史记录和热门搜索 组件 -->

    <HistoryHot
      v-if="blockShow == 1"
      :searchHistoryData="searchHistoryData"
      :searchHotData="searchHotData"
      @goSearch="setValue"
    ></HistoryHot>

    <!-- 搜搜提示列表 组件 -->

    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsArr="searchTipsArr"
      @setValue="setValue"
    >
    </SearchTipsList>

    <!-- 综合 价格 分类组件 -->
    <SearchProducts
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @priceChange="priceChange"
      @cateChange="cateChange"
      v-else
    >
    </SearchProducts>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
// 导入搜索功能相关组件
import HistoryHot from "../components/home/HistoryHot.vue";
import SearchTipsList from "../components/home/SearchTipsList.vue";
import SearchProducts from "../components/home/SearchProducts.vue";
// 导入服务器数据
import {
  GetPopupData,
  GetSearchData,
  GetSearchTipsListData,
} from "../https/http";
export default {
  // name:""
  data() {
    return {
      value: "",
      placeholderVal: "", //搜索框提示词
      blockShow: 1,
      searchHistoryData: [], // 历史记录列表
      searchHotData: [], // 热门搜索列表
      searchTipsArr: [], // 搜索提示列表(输入框输入时)
      goodsList: [], // 搜索出来的商品列表
      categoryId: 0, // 类别id
      filterCategory: [], // 下拉菜单分类数组
      order: "desc", // desc 价格由高到底
      sort: "id", // 可以是id或price
    };
  },
  methods: {
    // 回车事件
    onSearch() {
      // console.log("按了回车键", "输入的值为" + this.value);
      let params = {
        keyword: this.value,
        page: 1,
        sort:this.sort,
        order:this.order,
        categoryId:this.categoryId,
      };
      // console.log(JSON.stringify(params));
      GetSearchData(params).then(
        (res) => {
          // console.log(123, res);
          if (res.errno == 0) {
            this.blockShow = 3; //如果搜索成功了显示
            this.goodsList = res.data.goodsList;
            let cate = res.data.filterCategory; //下拉菜单数据
            cate = JSON.parse(JSON.stringify(cate));
            this.filterCategory = cate.map((item) => {
              console.log(11111,item);
              return { text: item.name, value: item.id,checked:item.checked };
            });
            // console.log(this.filterCategory); //每次搜索请求回来 子组件 展示的分类数据
            // debugger
          }
        },
        (err) => {
          // console.log(err);
        }
      );
    },
    // 取消单击
    onCancel() {
      console.log("按了取消键");
      this.chanGe()
      this.$router.push({name:"Home"});
    },
    // 搜索框内容改变事件
    onInput() {
      this.blockShow = 2; //展示搜索提示
      GetSearchTipsListData({ keyword: this.value }).then((res) => {
        console.log(222,res);
        this.searchTipsArr = res.data;
        // this.searchTipsArr = res.data
        console.log(this.searchTipsArr); //已经拿到了
      });
    },
    ...mapMutations(["chanGe"]),
    setValue(m) {
      console.log("接收到了子组件搜索关键字为", m);

      this.value = m;
      this.sort = "price";
      this.onSearch();
    },
    // 价格排序
    priceChange(value) {
      this.sort="price"
      // this.categoryId= 0,
      this.order = value
      this.onSearch()
    },
    // 分类筛选
    cateChange(value) {
      console.log(value);
      this.categoryId=value
      this.onSearch()
    },
  
  },
  components: {
    // 历史记录和热门搜索组件
    HistoryHot,
    // 搜索提示列表组件
    SearchTipsList,
    // 综合 价格 分类组件
    SearchProducts,
  },
  created() {
    GetPopupData().then(
      (res) => {
        console.log(res);
        // 历史记录
        this.searchHistoryData = res.data.historyKeywordList;
        // 热门搜索
        this.searchHotData = res.data.hotKeywordList;
        // 搜搜
      },
      (err) => {
        console.log(err);
      }
    );
  },
  mounted() {
  },
};
</script>

<style lang='less' scoped >
/* @import url(); 引入css类 */
.popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>